<template>
  <div class="wrap">
    <router-link></router-link>
    <hr />
    <h1>西瓜播放器</h1>
    <hr />
    <div class="videoPlayer">
      <xg-player :url="videoUrl" :poster="videoPoster"></xg-player>
    </div>
    <hr />
    <ImgLazy></ImgLazy>
  </div>
</template>
<script>
import XgPlayer from "@/components/xgplayer/xg-player.vue";
import ImgLazy from "@/components/home/ImgLazy.vue";
export default {
  directives: {},
  components: {
    XgPlayer,
    ImgLazy,
  },
  data() {
    return {
      /**图片路径 */
      videoUrl: [
        "//v26-web.douyinvod.com/b72af2e82e0e5e146fcf0facff0f7e7b/635260fa/video/tos/cn/tos-cn-ve-15c001-alinc2/a23e4339afe64ce89c8b10928eb2efa5/?a=6383&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1727&bt=1727&cs=0&ds=3&ft=t2zLrtjjM9wUxRatOQN6~OcstYb0rHCfxt-4kamuVTR7k&mime_type=video_mp4&qs=0&rc=O2VnOjk2ZjtkNGYzNmQ3aEBpajc8OTQ6ZnY3ZjMzNGkzM0AyL2FiMy42XjYxXmAwLWEvYSMxaWducjRfLjJgLS1kLWFzcw%3D%3D&l=021666339507900fdbddc03000804582a41b6166000001b73071e",
        "//sf1-cdn-tos.huoshanstatic.com/obj/media-fe/xgplayer_doc_video/mp4/xgplayer-demo-360p.mp4",
        "https://v26-web.douyinvod.com/c3d91ef1f7e52392d0f7833e7adf67db/6353ba6e/video/tos/cn/tos-cn-ve-15c001-alinc2/e37050c001e44b64be6e308b02b8a1c9/?a=6383&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1706&bt=1706&cs=0&ds=3&ft=t2zLrtjjM9wUxRXwTQN6~OPXtYbHrHCfxtf4kagpky_m6&mime_type=video_mp4&qs=0&rc=ZTZoOTU6ZzU0ZDQzaGZlOEBpM2tmOWg6ZnI8ZjMzNGkzM0BgNl41NTNiNl4xYzBjM18uYSNkZDBocjRvbi9gLS1kLS9zcw%3D%3D&l=021666427786882fdbddc02000800286142112f4000000f351a24",

        "https://v3-dy-o.zjcdn.com/422638ab66e7e942b28e9dbd6ceda1e7/6353bb2b/video/tos/cn/tos-cn-ve-15/b53465baf9b04cbd88852767ee18a9be/?a=6383&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=1554&bt=1554&cs=0&ds=3&ft=bvTKJiQPRUU~fusdUo6xQqYlb-slfxUFWerrqxY~RwP-4Wo&mime_type=video_mp4&qs=0&rc=PGZlOjc5ZDZnMzRnOjM2PEBpanR5dzc6ZnRoNzMzNGkzM0BfMS8zYDJhXl8xMjQ0X15iYSNrcGtpcjRfNjVgLS1kLTBzcw%3D%3D&l=021666428177838fdbddc0100ff2f010a7040ab0000007ea2a8f5&cc=1f",
        "https://v3-dy-o.zjcdn.com/967c611a3e72edeef8ebbef5e6267a1a/6353f990/video/tos/cn/tos-cn-ve-15c001-alinc2/37697667cdf247ce812e216e360f7814/?a=6383&ch=26&cr=3&dr=0&lr=all&cd=0%7C0%7C0%7C3&cv=1&br=2022&bt=2022&cs=0&ds=3&ft=bvTKJiQPRUU~fusdaX-xQqYl5gslfxUFWerreHPoPEoyM10&mime_type=video_mp4&qs=0&rc=ODtkMzU5OGU7OWVlPDdkNEBpM3h0OTg6ZnVoZTMzNGkzM0BjXzM1LTNiXmMxLjNiNTNeYSNxYGxmcjRvcXBgLS1kLWFzcw%3D%3D&l=021666444151289fdbddc0100ff2f010a702c5a0000006f85723b&cc=1f",
      ],
      videoPoster: require("../assets/img/10622.jpg"),
      // videoPoster: require("../assets/img/QQ图片20221020233318.jpg"),
    };
  },
};
</script>
<style lang="less" scoped>
.videoPlayer {
  height: 350px;
  width: 500px;
  margin: 0 auto;
}
</style>

